<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>实时数据</title>

    <meta name="description" content="">
    <meta name="author" content="Hovace">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap/bootstrap.css" />

    <!-- Fonts  -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,300' rel='stylesheet' type='text/css'>


    <!--charst-->

    <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="assets/js/charts/highcharts.js"></script>
    <script type="text/javascript" src="assets/js/charts/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            $(document).ready(function() {
                Highcharts.setOptions({
                    global: {
                        useUTC: false
                    }
                });

                var chart;
                $('#container').highcharts({
                    chart: {
                        type: 'spline',
                        animation: Highcharts.svg, // don't animate in old IE
                        marginRight: 10,
                        events: {
                            load: function() {

                                // set up the updating of the chart each second
                                var series = this.series[0];
                                setInterval(function() {
                                    var x = (new Date()).getTime(), // current time
                                            y = Math.random();
                                    series.addPoint([x, y], true, true);
                                }, 1000);
                            }
                        }
                    },
                    title: {
                        text: '实时出售量'
                    },
                    xAxis: {
                        type: 'datetime',
                        tickPixelInterval: 150
                    },
                    yAxis: {
                        title: {
                            text: '（T）'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                                    Highcharts.numberFormat(this.y, 2);
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    series: [{
                        name: '使用量',
                        data: (function() {
                            // generate an array of random data
                            var data = [],
                                    time = (new Date()).getTime(),
                                    i;

                            for (i = -10; i <= 0; i++) {
                                data.push({
                                    x: time + i * 1000,
                                    y: Math.random()
                                });
                            }
                            return data;
                        })()
                    }]
                });
            });

        });
    </script>

    <!-- Base Styling  -->
    <link rel="stylesheet" href="assets/css/app/app.v1.css" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body data-ng-app>


<!-- Preloader -->
<div class="loading-container">
    <div class="loading">
        <div class="l1">
            <div></div>
        </div>
        <div class="l2">
            <div></div>
        </div>
        <div class="l3">
            <div></div>
        </div>
        <div class="l4">
            <div></div>
        </div>
    </div>
</div>
<!-- Preloader -->


<aside class="left-panel">

    <div class="user text-center">
        <img src="assets/images/avtar/user.jpg" class="img-circle" alt="...">
        <h4 class="user-name">管理员1</h4>

    </div>


    <nav class="navigation">
        <ul class="list-unstyled">
            <li class="has-submenu"><a href="#"><i class=" fa fa-user"></i> <span
                    class="nav-label">个人中心</span></a>
                <ul class="list-unstyled">
                    <li><a href="mima.html">修改密码</a></li>

                </ul>
            </li>
            <li class="has-submenu "><a href="#"><i class="fa fa-credit-card"></i> <span
                    class="nav-label">卡片管理</span></a>
                <ul class="list-unstyled">
                    <li><a href="zhika.html">卡片制卡</a></li>
                    <li><a href="qianfa.html">卡片签发</a></li>
                    <li><a href="faka.html">发卡</a></li>
                    <li><a href="kapianxinxichaxun.html">卡片信息查询</a></li><!--用户信息 证书信息 《状态默认正常 虚拟卡信息 -->
                    <li><a href="gerenxinxi.html">详细信息</a></li>
                </ul>
            </li>
            <li class="has-submenu "><a href="#"><i class="fa fa-dollar"></i> <span class="nav-label">卡片交易</span></a>
                <ul class="list-unstyled">
                    <li><a href="chongzhi.html">充值</a></li>
                    <li><a href="chaxun.html">查询消费</a></li>
                    <li><a href="jiaoyimingxi.html">交易明细</a></li>
                    <li><a href="xiaopiao.html">打印小票</a></li>
                </ul>
            </li>
            <li class="has-submenu active"><a href="#"><i class=" fa fa-bar-chart"></i> <span
                    class="nav-label">运行监控</span></a>
                <ul class="list-unstyled">
                    <li class="active"><a href="realTimeData.html">实时数据</a></li>
                    <li><a href="hei.html">黑名单</a></li>
                </ul>
            </li>
        </ul>
    </nav>

</aside>
<!-- Aside Ends-->

<section class="content">


    <header class="top-head container-fluid">
        <button type="button" class="navbar-toggle pull-left">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <form role="search" class="navbar-left app-search pull-left hidden-xs">
            <input type="text" placeholder="输入关键字..." class="form-control form-control-circle">
        </form>

        <nav class=" navbar-default hidden-xs" role="navigation">

        </nav>

        <ul class="nav-toolbar">

            <li class="dropdown"><a href="#" data-toggle="dropdown"><i class="fa fa-bell-o"></i><span
                    class="badge">2</span></a>
                <div class="dropdown-menu arrow pull-right md panel panel-default arrow-top-right notifications">
                    <div class="panel-heading">
                        提醒
                    </div>

                    <div class="list-group">

                        <a href="#" class="list-group-item">
                            系统消息
                        </a>


                        <a href="#" class="list-group-item">
                            <div class="media">
                                <span class="label label-danger media-object img-circle pull-left">警告</span>
                                <div class="media-body">
                                    <h5 class="media-heading">你已被拉入黑名单</h5>
                                </div>
                            </div>
                        </a>


                    </div>

                </div>
            </li>

        </ul>
    </header>
    <!-- Header Ends -->



    <div class="warper container-fluid">

        <div class="page-header">
            <h1>实时数据
                <small> ...</small>
            </h1>
        </div>
        <div style="display: -webkit-box;display: -moz-box; ">
            <form role="search" class="navbar-left app-search pull-left hidden-xs col-lg-offset-10 col-sm-offset-10">
                <input type="text" placeholder="油站查询" class="form-control form-control-circle">
            </form>
        </div>

        <div class="row">


            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading">当前活跃用户</div>
                    <div class="panel-body">
                        <div id="" style="height:400px ;text-align: -webkit-center;">
                            现在
                            <span style="font-size:100px;display: -webkit-box;display: -moz-box;text-align: center;text-align: -webkit-center;text-align: -moz-center;"> 40</span>
                            台加油机正在工作

                            <a href="#" class="list-group-item" style="margin-top: 100px">
                                <p>加油机使用量<small class="pull-right text-muted">45%</small></p>
                                <div class="progress progress-xs no-margn progress-striped active">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                                        <span class="sr-only">45% Complete</span>
                                    </div>
                                </div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="panel panel-default">
                    <div class="panel-heading">实时数据</div>
                    <div class="panel-body">
                        <div id="container" style="min-width:700px;height:400px"></div>
                    </div>
                </div>
            </div>


        </div>

        <div class="row">

            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">本周收入（元）</div>
                    <div class="panel-body">
                        <div id="bar-chart" style="height:250px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">出售油量（吨）</div>
                    <div class="panel-body">
                        <div id="pie-chart" style="height:250px;"></div>
                    </div>
                </div>
            </div>


        </div>

     <!--   <div class="panel panel-default">
            <div class="panel-heading">今日交易</div>
            <div class="panel-body">

                <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered"
                       id="basic-datatable">
                    <thead>
                    <tr>
                        <th>时间</th>
                        <th>卡号</th>
                        <th>消费</th>
                        <th>充值</th>
                        <th>黑名单</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="odd gradeX">
                        <td>06:00</td>
                        <td>9800965001</td>
                        <td></td>
                        <td>500元</td>
                        <td>标记</td>

                    </tr>
                    <tr class="even gradeC">
                        <td>06:40</td>
                        <td>9800965001</td>
                        <td></td>
                        <td>500元</td>
                        <td></td>

                    </tr>
                    <tr class="odd gradeA">
                        <td>06:50</td>
                        <td>9800965001</td>
                        <td>1000元</td>
                        <td></td>
                        <td>标记</td>

                    </tr>
                    <tr class="even gradeA">
                        <td>06:55</td>
                        <td>9800965001</td>
                        <td>1000元</td>
                        <td></td>
                        <td></td>

                    </tr>
                    <tr class="odd gradeA">
                        <td>07:55</td>
                        <td>9800965001</td>
                        <td>100元</td>
                        <td>200元</td>
                        <td>标记</td>

                    </tr><tr class="odd gradeX">
                        <td>08:55</td>
                        <td>9800965001</td>
                        <td></td>
                        <td>500元</td>
                        <td>标记</td>

                    </tr>
                    <tr class="even gradeC">
                        <td>09:55</td>
                        <td>9800965001</td>
                        <td></td>
                        <td>500元</td>
                        <td></td>

                    </tr>
                    <tr class="odd gradeA">
                        <td>10:55</td>
                        <td>9800965001</td>
                        <td>1000元</td>
                        <td></td>
                        <td>标记</td>

                    </tr>
                    <tr class="even gradeA">
                        <td>10:55</td>
                        <td>9800965001</td>
                        <td>1000元</td>
                        <td></td>
                        <td></td>

                    </tr>
                    <tr class="odd gradeA">
                        <td>10:56</td>
                        <td>9800965001</td>
                        <td>100元</td>
                        <td>200元</td>
                        <td>标记</td>

                    </tr><tr class="odd gradeX">
                        <td>10:56</td>
                        <td>9800965001</td>
                        <td></td>
                        <td>500元</td>
                        <td>标记</td>

                    </tr>
                    <tr class="even gradeC">
                        <td>10:56</td>
                        <td>9800965001</td>
                        <td></td>
                        <td>500元</td>
                        <td></td>

                    </tr>
                    <tr class="odd gradeA">
                        <td>10:56</td>
                        <td>9800965001</td>
                        <td>1000元</td>
                        <td></td>
                        <td>标记</td>

                    </tr>
                    <tr class="even gradeA">
                        <td>10:56</td>
                        <td>9800965001</td>
                        <td>1000元</td>
                        <td></td>
                        <td></td>

                    </tr>
                    <tr class="odd gradeA">
                        <td>10:56</td>
                        <td>9800965001</td>
                        <td>100元</td>
                        <td>200元</td>
                        <td>标记</td>

                    </tr><tr class="odd gradeX">
                        <td>2016-03-13</td>
                        <td>9800965001</td>
                        <td></td>
                        <td>500元</td>
                        <td>标记</td>

                    </tr>
                    <tr class="even gradeC">
                        <td>10:56</td>
                        <td>9800965001</td>
                        <td></td>
                        <td>500元</td>
                        <td></td>

                    </tr>
                    <tr class="odd gradeA">
                        <td>10:56</td>
                        <td>9800965001</td>
                        <td>1000元</td>
                        <td></td>
                        <td>标记</td>

                    </tr>
                    <tr class="even gradeA">
                        <td>10:56</td>
                        <td>9800965001</td>
                        <td>1000元</td>
                        <td></td>
                        <td></td>

                    </tr>
                    <tr class="odd gradeA">
                        <td>10:56</td>
                        <td>9800965001</td>
                        <td>100元</td>
                        <td>200元</td>
                        <td>标记</td>

                    </tr><tr class="odd gradeX">
                        <td>10:56</td>
                        <td>9800965001</td>
                        <td></td>
                        <td>500元</td>
                        <td>标记</td>

                    </tr>
                    <tr class="even gradeC">
                        <td>10:56</td>
                        <td>9800965001</td>
                        <td></td>
                        <td>500元</td>
                        <td></td>

                    </tr>
                    <tr class="odd gradeA">
                        <td>10:56</td>
                        <td>9800965001</td>
                        <td>1000元</td>
                        <td></td>
                        <td>标记</td>

                    </tr>
                    <tr class="even gradeA">
                        <td>10:56</td>
                        <td>9800965001</td>
                        <td>1000元</td>
                        <td></td>
                        <td></td>

                    </tr>
                    <tr class="odd gradeA">
                        <td>2016-03-13</td>
                        <td>9800965001</td>
                        <td>100元</td>
                        <td>200元</td>
                        <td>标记</td>

                    </tr><tr class="odd gradeX">
                        <td>2016-03-13</td>
                        <td>9800965001</td>
                        <td></td>
                        <td>500元</td>
                        <td>标记</td>

                    </tr>
                    <tr class="even gradeC">
                        <td>2016-03-13</td>
                        <td>9800965001</td>
                        <td></td>
                        <td>500元</td>
                        <td></td>

                    </tr>
                    <tr class="odd gradeA">
                        <td>2016-03-13</td>
                        <td>9800965001</td>
                        <td>1000元</td>
                        <td></td>
                        <td>标记</td>

                    </tr>
                    <tr class="even gradeA">
                        <td>2016-03-13</td>
                        <td>9800965001</td>
                        <td>1000元</td>
                        <td></td>
                        <td></td>

                    </tr>
                    <tr class="odd gradeA">
                        <td>2016-03-13</td>
                        <td>9800965001</td>
                        <td>100元</td>
                        <td>200元</td>
                        <td>标记</td>

                    </tr><tr class="odd gradeX">
                        <td>2016-03-13</td>
                        <td>9800965001</td>
                        <td></td>
                        <td>500元</td>
                        <td>标记</td>

                    </tr>
                    <tr class="even gradeC">
                        <td>2016-03-13</td>
                        <td>9800965001</td>
                        <td></td>
                        <td>500元</td>
                        <td></td>

                    </tr>
                    <tr class="odd gradeA">
                        <td>2016-03-13</td>
                        <td>9800965001</td>
                        <td>1000元</td>
                        <td></td>
                        <td>标记</td>

                    </tr>
                    <tr class="even gradeA">
                        <td>2016-03-13</td>
                        <td>9800965001</td>
                        <td>1000元</td>
                        <td></td>
                        <td></td>

                    </tr>
                    <tr class="odd gradeA">
                        <td>2016-03-13</td>
                        <td>9800965001</td>
                        <td>100元</td>
                        <td>200元</td>
                        <td>标记</td>

                    </tr>

                    </tbody>


                </table>

            </div>


        </div>-->

    </div>
    <!-- Warper Ends Here (working area) -->


    <footer class="container-fluid footer">
        版权 &copy; 2016 <a href="http://www.cnpc.com.cn/" target="_blank">中国石油</a>
        <a href="#" class="pull-right scrollToTop"><i class="fa fa-chevron-up"></i></a>
    </footer>


</section>
<!-- Content Block Ends Here (right box)-->


<!-- JQuery v1.9.1 -->
<!--<script src="assets/js/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>-->
<script src="assets/js/plugins/underscore/underscore-min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap/bootstrap.min.js"></script>

<!-- Globalize -->
<script src="assets/js/globalize/globalize.min.js"></script>

<!-- NanoScroll -->
<script src="assets/js/plugins/nicescroll/jquery.nicescroll.min.js"></script>

<!-- Chart JS -->
<script src="assets/js/plugins/DevExpressChartJS/dx.chartjs.js"></script>
<!-- For Demo Charts -->
<script src="assets/js/plugins/DevExpressChartJS/demo-charts.js"></script>

<!-- Data Table -->
<script src="assets/js/plugins/datatables/jquery.dataTables.js"></script>
<script src="assets/js/plugins/datatables/DT_bootstrap.js"></script>
<script src="assets/js/plugins/datatables/jquery.dataTables-conf.js"></script>

<!-- Custom JQuery -->
<script src="assets/js/app/custom.js" type="text/javascript"></script>



<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-56821827-1', 'auto');
    ga('send', 'pageview');

</script>
</body>
</html>
